import React from 'react';
import { Card, Typography, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import TravelPlanner from '../components/TravelPlanner';
import { mockTravelPlan } from '../data/mockData';

const { Title } = Typography;

const PlannerPage: React.FC = () => {
  const handleSavePlan = (plan: any) => {
    console.log('保存旅行计划:', plan);
    // 这里可以添加保存到本地存储或发送到服务器的逻辑
    alert('旅行计划已保存！');
  };

  return (
    <div style={{ padding: '24px', maxWidth: 800, margin: '0 auto' }}>
      <Button 
        type="text" 
        icon={<ArrowLeftOutlined />} 
        href="/"
        style={{ marginBottom: 16 }}
      >
        返回首页
      </Button>
      
      <Card>
        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>
          旅行日程规划
        </Title>
        <TravelPlanner 
          initialPlan={mockTravelPlan}
          onSave={handleSavePlan}
        />
      </Card>
    </div>
  );
};

export default PlannerPage;
